<template>
  <div class="PowerSurveybox">
    <!-- 第一层盒子 -->
    <div class="topbox">
      <!-- 电站信息 -->
      <div class="toplittle">
        <div class="titlebox" style="height: 28px;">
          <div class="title">基本信息</div>
          <div>
            <el-select v-model="companyId" placeholder="" size="mini" @change="getlist" v-show="!routerid">
              <el-option v-for="(item,index) in xitonglist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
            </el-select>
          </div>
        </div>
        <div class="jibenxinxibody">
          <div class="imageandname">
            <div class="image">
              <img class="images" :src="'data:image/png;base64,' + imagevalue.pictureFile" alt="">
            </div>
            <div class="name">
              <div class="tianqi">
                <div>
                  <span class="text">天气:</span>
                  <span class="qi">&nbsp;&nbsp;{{ weather.weather }}</span>
                </div>
                <div>
                  <span class="text">温度:</span>
                  <span class="du">&nbsp;&nbsp;{{ weather.temperature }}℃</span>
                </div>
              </div>
              <div class="classhangyes">
                <div class="rongliang">装机容量</div>
                <div class="num kwp">{{ userentity.installationCapacity }}</div>
                <div dlass="danwei kwp">kWp</div>
              </div>
              <div class="classhangyes">
                <div class="rongliang">组件</div>
                <div class="num ge">{{ userentity.componentCount }}</div>
                <div dlass="danwei ge">个</div>
              </div>
              <div class="classhangyes">
                <div class="rongliang">逆变器</div>
                <div class="num tai">{{ userentity.inverterCount }}</div>
                <div dlass="danwei tai">台</div>
              </div>
            </div>
          </div>
          <div class="foot">
            <span class="classname">地址: </span>
            <span class="classhangye"> {{ userentity.address }}</span>
          </div>
        </div>
      </div>
      <!-- 发电概况 -->
      <div class="toplittle">
        <div class="title">发电概况</div>
        <div class="gaikuobox">
          <div class="gaikuolittlebox">
            <div class="danwei chang">今日(kWh)</div>
            <div class="number blue">{{ userentity.dailyGeneration }}</div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">当月(kWh)</div>
            <div class="number blue">{{ userentity.monthlyGeneration }}</div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">当年(kWh)</div>
            <div class="number blue">{{ userentity.annualGeneration }}</div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">日环比</div>
            <div class="number blue">
              <span :style="{color:userentity.dailyRatio>0?'#E72F2B':'#36B336'}">{{ userentity.dailyRatio }}%</span>
              <i v-if="userentity.dailyRatio>0" class="iconfont icon-xiangshangjiantou"></i>
              <i v-else class="iconfont icon-xiangxiajiantou1"></i>
            </div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">月环比</div>
            <div class="number blue">
              <span :style="{color:userentity.monthlyRatio>0?'#E72F2B':'#36B336'}">{{ userentity.monthlyRatio }}%</span>
              <i v-if="userentity.monthlyRatio>0" class="iconfont icon-xiangshangjiantou"></i>
              <i v-else class="iconfont icon-xiangxiajiantou1"></i>
            </div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">年环比</div>
            <div class="number blue">
              <span :style="{color:userentity.annualRatio>0?'#E72F2B':'#36B336'}">{{ userentity.annualRatio }}%</span>
              <i v-if="userentity.annualRatio>0" class="iconfont icon-xiangshangjiantou"></i>
              <i v-else class="iconfont icon-xiangxiajiantou1"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="toplittle">
        <div class="title">碳排分析</div>
        <div class="tanpaifenxi">
          <div class="littdun">
            <div class="zhongjian">
              <div>
                <img src="../../../../assets/Photovoltaic/CO2.png" alt="">
                <span class="fontsty"><span class="tongyi co2">{{ userentity.cumulativeReductionCarbon?.toFixed(3) }}</span> <span class="co2"> 吨</span></span>
              </div>
              <div class="jianshao">减少CO2排放量</div>
            </div>
          </div>
          <div class="littdun">
            <div class="zhongjian">
              <div>
                <img src="../../../../assets/Photovoltaic/so2.png" alt="">
                <span class="fontsty"><span class="tongyi cso2">{{ userentity.cumulativeReductionSO2?.toFixed(3) }}</span> <span class="cso2"> 吨</span></span>
              </div>
              <div class="jianshao">减少SO2排放量</div>
            </div>
          </div>
          <div class="littdun">
            <div class="zhongjian">
              <div>
                <img src="../../../../assets/Photovoltaic/mei.png" alt="">
                <span class="fontsty"><span class="tongyi mei">{{ userentity.cumulativeReductionStandardCoal?.toFixed(3) }}</span> <span class="mei"> 吨</span></span>
              </div>
              <div class="jianshao">减少标煤</div>
            </div>
          </div>
          <div class="littdun">
            <div class="zhongjian">
              <div>
                <img src="../../../../assets/Photovoltaic/tree.png" alt="">
                <span class="fontsty"><span class="tongyi tree">{{ userentity.reductionForest?.toFixed(3) }}</span> <span class="tree"> 棵</span></span>
              </div>
              <div class="jianshao">减少森林砍伐</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二层盒子 -->
    <div class="middle">
      <Middle :companyId="companyId" ref="Middlebox"></Middle>
    </div>
    <!-- 第三层盒子 -->
    <div class="footer">
      <Footer :companyId="companyId" ref="Footerbox"></Footer>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {getdianzhanlistapi} from '@/api/Photovoltaic/StatisticsReport/MaintainImg'
import {getdianzhanjibenapi} from '@/api/Photovoltaic/SystemHeught/PhotovoSurvey'
import {getphotovollistapi} from '@/api/Photovoltaic/analysis/YoyAnalysis'
import Middle from './middle.vue'
import Footer from './footer.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    Footer,
    Middle
  },
  data() {
    return {
      companyId:'',
      userentity: {},
      xitonglist: [],
      imagevalue: {},
      weather: {},
      routerid:''
    };
  },
  async created() {
    const { data: { list } } = await getphotovollistapi()
    this.xitonglist = list
    this.routerid = this.$route.query.id
    if (this.routerid) {
      this.$set(this, 'companyId', this.routerid)
      this.getlist(this.routerid)
    } else {
      const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
      this.$set(this, 'companyId', PhotoCompanyId ? +PhotoCompanyId : list[0].id)
      this.getlist(this.companyId)
    }
  },
  async mounted() {

  },

  methods: {
    // 电站下拉
    async getlist(val) {
      if(!this.routerid){
        localStorage.setItem('PhotoCompanyId', val)
      }
      // 获取基本信息
      const {data:{entity}} = await getdianzhanjibenapi({ classId: this.companyId })
      this.userentity = entity
      const res = await getdianzhanlistapi({ classId: this.companyId })
      this.imagevalue = res.data.entity
      this.huoqutianqi([entity.longitude, entity.latitude])
      // 获取发电量以及发电功率数据
      this.$refs.Middlebox.getecharts()
      // 获取逆变器/效率/消纳率
      this.$refs.Footerbox.getecharts()
    },
    //获取天气
    huoqutianqi(val) {
      axios.get(
          `https://restapi.amap.com/v3/geocode/regeo?location=${val}&key=d16b59895ea80ae1dc95fcf2165996ad`
      ).then(res => {
        axios({
          url: "https://restapi.amap.com/v3/weather/weatherInfo",
          method: "GET",
          params: {
          key: "d16b59895ea80ae1dc95fcf2165996ad",
          city:res.data.regeocode.addressComponent.adcode,
          extensions: '',
          output: "JSON"
          },
        }).then(item => {
          this.weather=item.data.lives[0]
        })
      })
    },
  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.PowerSurveybox{
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  .topbox, .middle, .footer{
    margin: 5px;
    flex: 1;
    overflow: hidden;
    /* background-color: #fff; */
  }
  .topbox{
    display: flex;
    justify-content: space-between;
    .toplittle{
      width: calc(33.33% - 7px);
      background-color: #fff;
      border-radius: 10px;
      padding: 15px;
      .jibenxinxibody{
        height: 90%;
        padding-top: 20px;
        .imageandname{
          height: 80%;
          display: flex;
          .image{
            width: 55%;
            height: 100%;
            border-radius: 5px;
            .images{
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 5px;
            }
          }
          .name{
            width: 45%;
            padding-left: 20px;
            .tianqi{
              display: flex;
              margin-top: 15px;
              font-size: 18px;
              color: #000;
              .text{
                font-size: 16px;
                color: #646464;
              }
              .qi, .du{
                /* font-style: italic; */
                color: black;
              }
              div{
                width: 50%;
              }
            }
            .classhangyes{
              display: flex;
              margin-top: 15px;
              .rongliang{
                width: 40%;
                font-size: 16px;
                color: #646464;
              }
              .danwei{
                width: 20%;
                font-size: 14px;
              }
              .num{
                width: 40%;
                font-size: 20px;
              }
              .kwp{
                font-style: italic;
                color: #fac858;
              }
              .ge{
                font-style: italic;
                color:#4fa5ff;
              }
              .tai{
                font-style: italic;
                color: #36b336;
              }
            }
          }
        }
        .classname{
              font-size: 16px;
              color: #646464;
            }
            .classhangye{
              font-size: 18px;
              color: #323232;
            }
            .foot{
              margin-top: 10px;
            }
      }
      .titlebox{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .title{
          font-weight: bold;
        }
      .gaikuobox{
        padding: 0px;
        height: 90%;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .gaikuolittlebox{
          /* width: 30%;
          height: 40%; */
          width: calc(33.33% - 10px);
          height: calc(50% - 10px);
          filter: drop-shadow(rgba(0, 0, 0, .15) 3px 3px 6px);
          background-color: #fff;
          border-radius: 15px;

          text-align: center;
          .danwei, .number{
             height: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             .iconfont{
              font-size: 30px;
             }
             .icon-xiangshangjiantou{
              color: #E72F2B;
             }
             .icon-xiangxiajiantou1{
              color: #36B336;
             }
          }
          .chang{
            font-size: 16px;
            color: #646464;
          }
          .blue{
            font-size: 22px;
            color: #1A90FE;
            white-space: nowrap; /* 防止换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 添加省略号 */
          }
        }
      }
      .tanpaifenxi{
        height: 88%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 7px;
        .littdun{
          width: calc(50% - 10px);
          height: calc(50% - 10px);
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          background-color: #fff;
          border-radius: 15px;
          filter: drop-shadow(rgba(0, 0, 0, .15) 3px 3px 6px);
          margin: 5px;
          .zhongjian{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
              vertical-align: middle;
              margin-right: 10px;
            }
            .fontsty{
              font-style: italic;
              .tongyi{
                font-size: 18px;
              }
              .co2{
                color: #4fa5ff;
              }
              .cso2{
                color: #0de2f5;
              }
              .mei{
                color: #707070;
              }
              .tree{
                color: #8bba28;
              }
            }
            .jianshao{
              margin-top: 0px;
            }
          }
        }
      }
    }
  }
}
</style>